﻿@model OT.Areas.Admin.Models.Citys
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
    <h3 id="myModalLabel">Create City</h3>
</div>
<div class="modal-body">
    <div id="alert_modal">
        @Html.ValidationSummary()
    </div>
    <div class="form-horizontal" role="form">
        <div class="form-group">
            <div class="col-lg-13">
                <div id="divMsgCre"></div>
            </div>
        </div>
        <div class="form-group" id="divCountry">
            <label class="col-lg-3 control-label">Country</label>
            <div class="col-lg-5">
                @Html.DropDownListFor(model => model.CountryID, new SelectList(Model.Country, "CountryID", "CountryName"), "----Select Country---", new { id = "ddlCountry", @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CountryID)
            </div>
        </div>
        <div class="form-group" id="divState">
            <label class="col-lg-3 control-label">State</label>
            <div class="col-lg-5">
                @Html.DropDownListFor(model => model.StateID, new SelectList(Model.States, "StateID", "StateName"), "---Select State----", new { id = "ddlState", @class = "form-control" })
                @Html.ValidationMessageFor(model => model.StateID)
            </div>
        </div>
        <div class="form-group" id="divCityCode">
            <label class="col-lg-3 control-label">City Code</label>
            <div class="col-lg-5">
                <input class="form-control" type="text" placeholder="Enter City Code" id="CityCode" maxlength="10">
            </div>
        </div>
        <div class="form-group" id="divCityName">
            <label class="col-lg-3 control-label">City Name</label>
            <div class="col-lg-5">
                <input class="form-control" type="text" placeholder="Enter City Name" id="CityName" maxlength="50">
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-default" type="submit" id="btnCreate"><i class="icon-cog"></i>Save</button>
    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true"><i class="icon-off"></i>Cancel</button>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var select = $("#ddlState");
        select.empty();
        $("#ddlCountry").change(function () {
            var CountryID = $(this).val();
            if (CountryID != 0) {
                $.getJSON("/admin/City/LoadState", { CountryID: CountryID },
                       function (classesData) {
                           var select = $("#ddlState");
                           select.empty();
                           select.append($('<option/>', {
                               value: 0,
                               text: "--Select State--"
                           }));
                           $.each(classesData, function (index, itemData) {
                               select.append($('<option/>', {
                                   value: itemData.Value,
                                   text: itemData.Text
                               }));
                           });
                       });
            }
            else {
                var select = $("#ddlState");
                select.empty();
                select.append($('<option/>', {
                    value: 0,
                    text: "--Select State--"
                }));
            }
        });
        $("#btnCreate").click(function (e) {
            var StateID = $("#ddlState option:selected").val();
            var CityName = $("#CityName").val();
            var CityCode = $("#CityCode").val();
            var country = $("#ddlCountry").val();
            e.preventDefault();
            if (CityName == '' || CityCode == '' || StateID == 0 || country == 0) {
                showMsg("divMsgCre", "Enter all Required Field Value", "danger");
                (CityName == '') ? $('#divCityName').addClass('has-error') : $('#divCityName').removeClass('has-error');
                (CityCode == '') ? $('#divCityCode').addClass('has-error') : $('#divCityCode').removeClass('has-error');
                (StateID == 0) ? $('#divState').addClass('has-error') : $('#divState').removeClass('has-error');
                (country == 0) ? $('#divCountry').addClass('has-error') : $('#divCountry').removeClass('has-error');
            }
            else {
                $.ajax({
                    url: "/Admin/City/Create?CityCode=" + CityCode + "&CityName=" + CityName + "&StateID=" + StateID,
                    type: "POST",
                    success: function (result) {
                        if (result != "NotValid") {
                            $('#modalDiv').modal('hide');
                            showMsg('divMsgCre', 'Record Sucessfully Created.', 'success');
                            loadPage(1, 10, '');
                        }
                        else {
                            showMsg('divMsgCre', 'Record Not Saved.!!Error ', 'danger');
                        }
                    },
                    error: function (data) {
                    }
                });
            }
            return false;
        });
    });
</script>
